{extend name="main/index" /}
{block name="nav1"}class="active subdrop"{/block}


{block name="main"}
<!-- Start right content -->
<div class="content-page">
    <!-- ============================================================== -->
    <!-- Start Content here -->
    <!-- ============================================================== -->
    <div class="content">
        <!-- Page Heading Start -->
        <div class="page-heading">
            <h1>Bitcoin Block</h1>
            <h3><i class='fa fa-btc'></i> 区块列表数据</h3>
        </div>


        <div class="row">
            <div class="col-md-12">
                <div class="widget">
                    <div class="widget-content">
                        <div class="data-table-toolbar">
                            <div class="row">
                                <div class="col-md-8">
                                    <a class="btn btn-success"><i class="fa fa-plus-circle"></i> Add Data</a>
                                    <a class="btn btn-primary" href="javascript:void(0)" id="updateBlock"><i
                                            class="fa fa-refresh"></i> Update Data : </a>
                                    <span id="num">
                                        <label class="radio-inline"><input type="radio" name="num" value="1" checked>1条</label>
                                        <label class="radio-inline"><input type="radio" name="num" value="10">10条</label>
                                        <label class="radio-inline"><input type="radio" name="num" value="100">100条</label>
                                        <label class="radio-inline"><input type="radio" name="num" value="500">500条</label>
                                    </span>
                                </div>

                                <div class="col-md-4">
                                    <form role="form" method="get">
                                        <input type="text" name="q" class="form-control" placeholder="块高度 / 哈希值 ...">
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive mt20">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th class="col-md-1">Height</th>
                                    <th class="col-md-1">广播者</th>
                                    <th class="col-md-1">Size(Bytes)</th>
                                    <th class="col-md-2">块收益</th>
                                    <th class="col-md-1">交易量</th>
                                    <th class="col-md-6">哈希 / Hash</th>
                                    <th>Action</th>
                                </tr>
                                </thead>

                                <tbody id="blocklist">
                                {volist name="data" id="v"}
                                <tr>
                                    <td><a href="#">{$v['height']}</a></td>
                                    <td>
                                        {if condition="$v['pool_name'] heq null"}Unknown
                                        {else /}<a href="#">{$v['pool_name']}</a>
                                        {/if}
                                    </td>
                                    <td>{$v['size']}</td>
                                    <td><?php echo ($v['reward_block'] + $v['reward_fees']) / 100000000 ?> BTC</td>
                                    <td>{$v['tx_count']}</td>
                                    <td><a href="#">{$v['hash']}</a>
                                    </td>
                                    <td>
                                        <button data-toggle="tooltip" title="Edit" class="btn btn-primary btn-xs">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                    </td>
                                </tr>
                                {/volist}
                                </tbody>
                            </table>
                        </div>

                        <div class="data-table-toolbar">
                            <div class="btn-group col-md-offset-4 mt50">
                                <button type="button" class="btn btn-success"><i class="fa fa-angle-left"></i></button>
                                <button class="btn btn-success active">1</button>
                                <button class="btn btn-success">2</button>
                                <button class="btn btn-success">3</button>
                                <button class="btn btn-success">4</button>
                                <button class="btn btn-success">...</button>
                                <button type="button" class="btn btn-success">
                                    <i class="fa fa-angle-right"></i>
                                </button>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Footer Start -->
        <footer>
            Seeker &copy; 2018
            <div class="footer-links pull-right">
                <a href="#">About</a><a href="#">Support</a><a href="#">Terms of Service</a><a href="#">Legal</a><a
                    href="#">Help</a><a href="#">Contact Us</a>
            </div>
        </footer>
        <!-- Footer End -->
    </div>
    <!-- ============================================================== -->
    <!-- End content here -->
    <!-- ============================================================== -->

</div>
<!-- End right content -->

{/block}


{block name="js"}
<!-- Page Specific JS Libraries -->
<script src="__ADMIN__assets/libs/jquery-notifyjs/notify.min.js"></script>
<script>
    $(function () {
        mark = false; // 记录状态
        $('#updateBlock').on(
            'click',
            function () {
                // 更新条目数量
                var nc = $('#num input:checked').val();
                // console.log(nc);
                if (nc == 1) {
                    getOneAjax();
                } else {
                    getAjax(nc);
                }
            }
        );
        // 每隔3s检测一次写入状态,请求下一批数据
        setInterval(function () {
            var nc = $('#num input:checked').val();
            // console.log(nc);
            if (mark) {
                mark = false;
                if (nc == 1) {
                    // 重复单条更新
                    getOneAjax(nc);
                } else {
                    // 重复多条更新
                    getAjax(nc);
                }
            }
        }, 3000); // 延迟执行下一次

        function getAjax(n) {
            $.ajax({
                url: '/getBlock/' + n,
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    // console.log(data);
                    if (data.status) {
                        for (var i = 0; i < data.datas.length; i++) {
                            var blockMsg =
                                '<tr>' +
                                '<td><a href="#">' + data.datas[i].height + '</a></td>' +
                                '<td><a href="#">' + data.datas[i].extras.pool_name + '</a></td>' +
                                '<td>' + data.datas[i].size + '</td>' +
                                '<td>' + (((data.datas[i].reward_block + data.datas[i].reward_fees) / 100000000).toFixed(5)) + ' BTC</td>' +
                                '<td>' + data.datas[i].tx_count + '</td>' +
                                '<td><a href="#">' + data.datas[i].hash + '</a></td>' +
                                '<td>' +
                                '    <button data-toggle="tooltip" title="Edit" class="btn btn-primary btn-xs">' +
                                '        <i class="fa fa-edit"></i>' +
                                '    </button>' +
                                '</td>' +
                                '</tr>';
                            $(blockMsg).prependTo("#blocklist");
                            var hh = data.datas[i].height;
                            console.log('高度: [ ' + hh + ' ]的数据块已更新完成!');
                        }
                        $.notify('本次更新[' + data.datas.length + ']个数据块高度，更新至: [ ' + hh + ' ]', 'success');
                        mark = true;
                    } else {
                        $.notify('数据块更新失败: ' + data.msg);
                        return false;
                    }
                },
                error: function () {
                    console.log('AJAX 请求失败');
                    return false;
                }
            });
        }

        function getOneAjax() {
            $.ajax({
                url: '/getOneBlock/',
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (data.status) {
                        var blockMsg =
                            '<tr>' +
                            '<td><a href="#">' + data.datas.height + '</a></td>' +
                            '<td><a href="#">' + data.datas.extras.pool_name + '</a></td>' +
                            '<td>' + data.datas.size + '</td>' +
                            '<td>' + (((data.datas.reward_block + data.datas.reward_fees) / 100000000).toFixed(5)) + ' BTC</td>' +
                            '<td>' + data.datas.tx_count + '</td>' +
                            '<td><a href="#">' + data.datas.hash + '</a></td>' +
                            '<td>' +
                            '    <button data-toggle="tooltip" title="Edit" class="btn btn-primary btn-xs">' +
                            '        <i class="fa fa-edit"></i>' +
                            '    </button>' +
                            '</td>' +
                            '</tr>';
                        $(blockMsg).prependTo("#blocklist");

                        $.notify('本次更新[ 1 ]个数据块高度，更新至: [ ' + data.datas.height + ' ]', 'success');
                        mark = true;
                    } else {
                        $.notify('数据块更新失败: ' + data.msg);
                        return false;
                    }
                },
                error: function () {
                    console.log('AJAX 请求失败');
                    return false;
                }
            });
        }
    });

</script>

{/block}